<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;padding-bottom: 3px">
      <el-table-column
        type="index" label="序号">
      </el-table-column>
      <el-table-column
        prop="merchantId"
        label="店铺编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="merchantName"
        label="店铺名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="merchantAccount"
        label="店铺账号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="shopkeeperName"
        label="店主名称"
        width="150">
      </el-table-column>

      <el-table-column
        prop="merchantKindsId"
        label="主营类目"
        width="150">
      </el-table-column>
      <el-table-column
        prop="merchantKeyword"
        label="关键字"
        width="100">
      </el-table-column>
      <el-table-column
        prop="merchantTypeId"
        label="类型"
        width="50">
      </el-table-column>
      <el-table-column
        prop="merchantStatusId"
        label="店铺状态"
        width="150">
        <template slot-scope="scope">
          <span>{{scope.row.merchantStatusId==0?'未审核':'其他'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateBy"
        label="修改人"
        width="100">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="修改时间"
        width="150">
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="viewDatails(scope.$index, scope.row)">详情</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="pass(scope.$index, scope.row,2)" :disabled="forbid">通过</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="pass(scope.$index, scope.row,3)" :disabled="forbid">驳回</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog title="店铺基础信息" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false" width="60%" >
      <merchantInfo :ind="ind" :sta="sta" @func="func" :compile="false"></merchantInfo>
    </el-dialog>

  </div>
</template>

<script>

  import Sortable from "sortablejs"
  import merchantInfo from './MerchantInfo.vue'
  import {getData} from "../../utils"
  export default {
    /*    name: "dragTabe",*/
    components: {
      merchantInfo
    },
    data () {
      return {
        tableData: [],
        dialogTableVisible: false,
        sta: 1,
        ind: 1,
        forbid: false,
        dialogTable: true

      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData(){
        this.$axios.get("http://localhost:8301/merchantAccount/getAllMerchant?merchantStatusId="+0)
          .then(response => {
            console.log(response.data)
            this.tableData=response.data;
            console.log(this.tableData)
          })

      },
      viewDatails (index,row) {
        //this.$router.replace('/merchantInfo')
        this.sta=row.merchantStatusId;
        alert(row.merchantId)
        this.ind=row.merchantId;
        this.dialogTableVisible=true;
      },
      pass(index,row,val){
        this.forbid = false
        this.$axios.put("http://localhost:8301/merchantAccount/updataMerchantInfo",{
          merchantId: row.merchantId,
          merchantStatusId: val
        }).then(response =>{
          this.getData();
          if(val == 3){
            this.$message.success("审核通过")
          }else{
            this.$message.error("审核驳回")
          }
        }).catch((r)=>{
          console.log(r);
        })
      },
      filterTag (value, row) {
        return row.tag === value
      },
      func(data){
        this.dialogTableVisible=data;
        this.getData()
      }
    },

    mounted () {
      let el = document.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]
      this.sortable = Sortable.create(el)
    }
  }
</script>

<style>
  .sortable-ghost{
    opacity: .9;
  }
  .sortable-ghost td{
    border-top: 1px dashed #666666 !important;
    border-bottom: 1px dashed #666666 !important;
    color: #fff!important;
  }
  .sortable-ghost td:first-child{
    border-left: 1px dashed #666666 !important;
  }
  .sortable-ghost td:last-child{
    border-right: 1px dashed #666666 !important;
    border-bottom: 1px dashed #666666 !important;
  }
</style>
<style lang="scss">
  p.dragtabe{
    margin-top: 30px;
  }
</style>
